<template>
<onekit-page>
<onekit-view onekit-class="container">
	<div is="onekit-template-head" :DATA="`${JSON.stringify({title:'rich-text'})}`"></div>
	<onekit-view onekit-class="page-body">
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">通过HTML String渲染</onekit-view>
			<onekit-view onekit-class="page-content">
				<onekit-scroll-view scroll-y>{{htmlSnip}}</onekit-scroll-view>
				<onekit-button type="primary" @Tap="renderHtml">渲染HTML</onekit-button>
				<template v-if="renderedByHtml">
					<onekit-rich-text :nodes="htmlSnip"></onekit-rich-text>
				</template>
			</onekit-view>
		</onekit-view>
		<onekit-view onekit-class="page-section">
			<onekit-view onekit-class="page-section-title">通过节点渲染</onekit-view>
			<onekit-view onekit-class="page-content">
				<onekit-scroll-view scroll-y>{{nodeSnip}}</onekit-scroll-view>
				<onekit-button type="primary" @Tap="renderNode">渲染Node</onekit-button>
				<template v-if="renderedByNode">
					<onekit-rich-text :nodes="nodes"></onekit-rich-text>
				</template>
			</onekit-view>
		</onekit-view>
	</onekit-view>
	<div is="onekit-template-foot"></div>
</onekit-view>
</onekit-page></template>
<script>
/* eslint-disable */
import Vue from 'vue';
import onekit_template_0 from '../../../../page/common/head.head.vue';Vue.component('onekit-template-head',onekit_template_0);
import onekit_template_1 from '../../../../page/common/foot.foot.vue';Vue.component('onekit-template-foot',onekit_template_1);
const ONEKIT_JSON= {
  "navigationBarTitleText": "rich-text",
  "usingComponents": {
    
  }
};
const ONEKIT_SJS = {
};
import wx from '../../../../../weixin2vue/wx.js';
import Macro from '../../../../../weixin2vue/Macro.js';
const {getApp,getCurrentPages} = Macro;
import Page from '../../../../../weixin2vue/OnekitPage.js';
import Component from '../../../../../weixin2vue/OnekitComponent.js';
const htmlSnip = `<div class="div_class">
  <h1>Title</h1>
  <p class="p">
    Life is&nbsp;<i>like</i>&nbsp;a box of
    <b>&nbsp;chocolates</b>.
  </p>
</div>
`;
const nodeSnip = `Page({
  data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'You never know what you're gonna get.'
      }]
    }]
  }
})
`;
export default Page(ONEKIT_JSON,["htmlSnip","renderedByHtml","nodeSnip","renderedByNode","nodes"],ONEKIT_SJS,{
    "onShareAppMessage"(){
      return {
        "title":'rich-text',
        "path":'page/component/pages/rich-text/rich-text'
};
    },
    "data":{
        htmlSnip,
        nodeSnip,
        "renderedByHtml":false,
        "renderedByNode":false,
        "nodes":[
          {
              "name":'div',
              "attrs":{
                  "class":'div_class',
                  "style":'line-height: 60px; color: #1AAD19;'
},
              "children":[
                {
                    "type":'text',
                    "text":'You never know what you\'re gonna get.'
}
              ]
}
        ]
},
    "renderHtml"(){
      this.setData({
        "renderedByHtml":true
});
    },
    "renderNode"(){
      this.setData({
        "renderedByNode":true
});
    },
    "enterCode"(e){
      console.log(e.detail.value);
      this.setData({
        "htmlSnip":e.detail.value
});
    }
});

</script>
<style 
 lang="css">
.page-content {
  width: auto ;
  margin: 15px 0 ;
  padding: 0 25px ;
}
.code-fragment {
  height: 325px ;
}
.code-textarea {
  width: auto ;
  height: 325px ;
  border: 1px solid #1AAD19 ;
}
.p {
  color: #1AAD19 ;
  margin-top: 15px ;
}
.space {
  display: inline-block ;
  background: red ;
  width: 5px ;
}
.onekit-scroll-view {
  height: 325px ;
  border: 1px solid #1AAD19 ;
  white-space: pre ;
  padding: 5px ;
  box-sizing: border-box ;
}
</style>